import { useRef, useState } from "react";
import { useNavigate } from "react-router";
import { useDispatch } from "react-redux";
import Title from "@/components/Title";
import FilterForm from "./FilterForm";
import styles from './style.module.css';

import { setFilter } from "@/store/filter";

const ProFilter = () => {
  const [resetKey, setResetKey] = useState(0);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const formRef = useRef<any>(null);


  const handleReset = () => {
    setResetKey(1 - resetKey)
    dispatch(setFilter(null))
  }
  const handleSearch = () => {
    console.log(formRef.current.collectValues());
    dispatch(setFilter(formRef.current.collectValues()))
    navigate(-1)
  }

  return (
    <div className="flex flex-col h-full">
      <Title>高级筛选</Title>
      <div className="flex-1 overflow-hidden">
        <FilterForm key={resetKey} ref={formRef}></FilterForm>
      </div>
      <div className={"flex h-[88px] " + styles.footer}>
        <button className="flex-1" onClick={handleReset}>重置</button>
        <button className="flex-1 bg-[#3688FF] text-white" onClick={handleSearch}>确定</button>
      </div>
    </div>
  );
};

export default ProFilter;
